import React, { Component } from 'react';
import { get } from 'utils/http'
import { HotListWrap } from './styledIndex'
class HotList extends Component {
    state = {
        hotlist: []
    }

    async componentDidMount() {
        let result = await get({
            url:'/api/home/index/getHotsRecommendList?city_id=0&version=6.0.9&referer=2'
        })

        this.setState({
            hotlist: result.data.hots_show_list
        })
    }
    render() {
        return (
            <HotListWrap>
                <header>热门演出</header>
                <span>></span>
                <div>
                    {
                        this.state.hotlist.length && (
                            this.state.hotlist.slice(0,11).map( (value,index) => (
                                <figure key={index}>
                                    <img src={value.pic} alt={value.show_name}/>
                                    <figcaption>
                                        <h3 className="hhh">{value.show_name}</h3>
                                    </figcaption>
                                </figure>
                            ) )
                        )
                    }  
                </div>
                
            </HotListWrap>
        );
    }
}

export default HotList;